<template>
	<view class="profile-container">
		<!-- 个人信息卡片 -->
		<view class="profile-card">
			<!-- 背景装饰 -->
			<view class="profile-bg"></view>

			<!-- 用户信息 -->
			<view class="user-info">
				<!-- 头像 -->
				<image :src="userInfo.avatar" mode="aspectFill" class="avatar" @click="editProfile"></image>

				<!-- 基本信息 -->
				<view class="basic-info">
					<text class="username">{{ userInfo.username }}</text>
					<text class="user-id">ID: {{ userInfo.userId }}</text>
					<text class="user-bio">{{ userInfo.bio }}</text>
				</view>

				<!-- 设置图标 -->
				<text class="settings-icon" @click="goToSettings">⚙️</text>
			</view>

			<!-- 统计数据 -->
			<view class="stats-container">
				<view class="stat-item" @click="goToFollowers">
					<text class="stat-number">{{ userInfo.followers }}</text>
					<text class="stat-label">粉丝</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="goToFollowing">
					<text class="stat-number">{{ userInfo.following }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="goToLikes">
					<text class="stat-number">{{ userInfo.likes }}</text>
					<text class="stat-label">获赞</text>
				</view>
			</view>
		</view>

		<!-- 我的活动 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">我的活动</text>
				<text class="section-more" @click="goToMyActivities">查看全部 ></text>
			</view>
			<view class="activity-tabs">
				<view class="activity-tab" :class="{ active: activeActivityTab === 'joined' }"
					@click="switchActivityTab('joined')">
					<text>已报名</text>
				</view>
				<view class="activity-tab" :class="{ active: activeActivityTab === 'created' }"
					@click="switchActivityTab('created')">
					<text>已发布</text>
				</view>
				<view class="activity-tab" :class="{ active: activeActivityTab === 'history' }"
					@click="switchActivityTab('history')">
					<text>历史</text>
				</view>
			</view>

			<!-- 活动列表 -->
			<view class="my-activities" v-if="activeActivityTab === 'joined'">
				<view class="activity-item" v-for="(activity, index) in joinedActivities" :key="index">
					<image :src="activity.image" mode="aspectFill" class="activity-image"></image>
					<view class="activity-info">
						<text class="activity-title">{{ activity.title }}</text>
						<text class="activity-time">{{ activity.time }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="section">
			<view class="menu-item" @click="goToFavorites">
				<view class="menu-icon">
					<text class="icon-emoji">⭐</text>
				</view>
				<text class="menu-text">我的收藏</text>
				<text class="arrow-icon">›</text>
			</view>

			<view class="menu-item" @click="goToHistory">
				<view class="menu-icon">
					<text class="icon-emoji">🕒</text>
				</view>
				<text class="menu-text">浏览历史</text>
				<text class="arrow-icon">›</text>
			</view>

			<view class="menu-item" @click="goToWallet">
				<view class="menu-icon">
					<text class="icon-emoji">💰</text>
				</view>
				<text class="menu-text">我的钱包</text>
				<text class="arrow-icon">›</text>
			</view>

			<view class="menu-item" @click="goToSettings">
				<view class="menu-icon">
					<text class="icon-emoji">⚙️</text>
				</view>
				<text class="menu-text">设置</text>
				<text class="arrow-icon">›</text>
			</view>

			<view class="menu-item" @click="goToHelp">
				<view class="menu-icon">
					<text class="icon-emoji">❓</text>
				</view>
				<text class="menu-text">帮助与反馈</text>
				<text class="arrow-icon">›</text>
			</view>

			<view class="menu-item" @click="goToAbout">
				<view class="menu-icon">
					<text class="icon-emoji">ℹ️</text>
				</view>
				<text class="menu-text">关于我们</text>
				<text class="arrow-icon">›</text>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-button" @click="handleLogout">
			<text>退出登录</text>
		</view>
		
		<!-- 底部tabbar -->
		<view class="tabbar">
			<BottomTabbar theme="light" :value="4" :color="'#892FE8'" />
		</view>
	</view>
</template>

<script setup>
	import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
	import {
		ref,
		onMounted
	} from 'vue';

	// 用户信息
	const userInfo = ref({
		avatar: '/static/avatar/1.jpg',
		username: '搭子爱好者',
		userId: '12345678',
		bio: '热爱生活，喜欢交新朋友',
		followers: 128,
		following: 56,
		likes: 234
	});

	// 活动标签状态
	const activeActivityTab = ref('joined');

	// 已报名活动
	const joinedActivities = ref([{
			id: 1,
			title: '周末户外徒步登山活动',
			image: '/static/avatar/1.jpg',
			time: '周六 09:00-16:00'
		},
		{
			id: 2,
			title: '线上编程技术分享会',
			image: '/static/avatar/3.jpg',
			time: '周五 19:30-21:00'
		}
	]);

	// 切换活动标签
	const switchActivityTab = (tab) => {
		activeActivityTab.value = tab;
	};

	// 编辑个人资料
	const editProfile = () => {
		uni.navigateTo({
			url: '/pages_my/edit-profile'
		});
	};

	// 跳转到设置页面
	const goToSettings = () => {
		uni.navigateTo({
			url: '/pages_my/settings'
		});
	};

	// 跳转到粉丝页面
	const goToFollowers = () => {
		uni.navigateTo({
			url: '/pages_my/followers'
		});
	};

	// 跳转到关注页面
	const goToFollowing = () => {
		uni.navigateTo({
			url: '/pages_my/following'
		});
	};

	// 跳转到获赞页面
	const goToLikes = () => {
		uni.navigateTo({
			url: '/pages_my/likes'
		});
	};

	// 跳转到我的活动页面
	const goToMyActivities = () => {
		uni.navigateTo({
			url: '/pages_my/my-activities'
		});
	};

	// 跳转到收藏页面
	const goToFavorites = () => {
		uni.navigateTo({
			url: '/pages_my/favorites'
		});
	};

	// 跳转到浏览历史页面
	const goToHistory = () => {
		uni.navigateTo({
			url: '/pages_my/history'
		});
	};

	// 跳转到钱包页面
	const goToWallet = () => {
		uni.navigateTo({
			url: '/pages_my/wallet'
		});
	};

	// 跳转到帮助与反馈页面
	const goToHelp = () => {
		uni.navigateTo({
			url: '/pages_my/help-feedback'
		});
	};

	// 跳转到关于我们页面
	const goToAbout = () => {
		uni.navigateTo({
			url: '/pages_my/about'
		});
	};

	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '确认退出',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除登录状态
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('token');

					// 跳转到登录页
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			}
		});
	};

	// 页面挂载
	onMounted(() => {
		console.log('个人中心页面已加载');
	});
	
	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
	})
</script>

<style scoped lang="scss">
	/* 全局变量 */
	$primary-color: #7C3AED;
	$bg-color: #f3f4f6;
	$white: #ffffff;
	$text-primary: #1F2937;
	$text-secondary: #6B7280;
	$border-color: #E5E7EB;

	.profile-container {
		background-color: $bg-color;
		min-height: 100vh;
		// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
		padding-bottom: 120rpx;
	}

	/* 个人信息卡片 */
	.profile-card {
		position: relative;
		padding-bottom: 40rpx;
	}

	.profile-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300rpx;
		background: linear-gradient(135deg, $primary-color, #9D65F9);
		border-radius: 0 0 30rpx 30rpx;
		z-index: 1;
	}

	.user-info {
		position: relative;
		padding: 30rpx;
		display: flex;
		align-items: center;
		z-index: 2;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 70rpx;
		border: 6rpx solid $white;
		margin-right: 24rpx;
	}

	.basic-info {
		flex: 1;
	}

	.username {
		font-size: 36rpx;
		font-weight: 700;
		color: $white;
		margin-bottom: 8rpx;
		display: block;
	}

	.user-id {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 8rpx;
		display: block;
	}

	.user-bio {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		display: block;
	}

	/* 统计数据 */
	.stats-container {
		position: relative;
		display: flex;
		background-color: $white;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx 0;
		z-index: 2;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: 700;
		color: $text-primary;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: $text-secondary;
	}

	.stat-divider {
		width: 2rpx;
		background-color: $border-color;
		height: 60rpx;
		align-self: center;
	}

	/* 通用区块样式 */
	.section {
		background-color: $white;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid $border-color;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: $text-primary;
	}

	.section-more {
		font-size: 26rpx;
		color: $text-secondary;
	}

	/* 活动标签 */
	.activity-tabs {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid $border-color;
	}

	.activity-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		position: relative;
	}

	.activity-tab.active text {
		color: $primary-color;
		font-weight: 500;
	}

	.activity-tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 24rpx;
		height: 4rpx;
		background-color: $primary-color;
		border-radius: 2rpx;
	}

	/* 我的活动列表 */
	.my-activities {
		padding: 20rpx 0 30rpx 0;
	}

	.activity-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.activity-item:last-child {
		margin-bottom: 0;
	}

	.activity-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.activity-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.activity-title {
		font-size: 28rpx;
		color: $text-primary;
		font-weight: 500;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.activity-time {
		font-size: 24rpx;
		color: $text-secondary;
	}

	/* 功能列表 */
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid $border-color;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		background-color: rgba($primary-color, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 30rpx;
		color: $text-primary;
	}

	.settings-icon {
		font-size: 36rpx;
		color: #FFFFFF;
		cursor: pointer;
	}

	.icon-emoji {
		font-size: 36rpx;
	}

	.arrow-icon {
		font-size: 28rpx;
		color: #9CA3AF;
	}

	/* 退出登录按钮 */
	.logout-button {
		margin: 40rpx 30rpx 0 30rpx;
		background-color: $white;
		border-radius: 20rpx;
		padding: 30rpx 0;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.logout-button text {
		font-size: 32rpx;
		color: #EF4444;
	}

	/* 响应式适配 */
	@media screen and (min-width: 768px) {
		.profile-container {
			max-width: 750rpx;
			margin: 0 auto;
		}
	}
</style>